<template>
	<view class="store">
		<!-- position: fixed; -->
		<view class="xiding topFixed" style="width: 100%; background: url(https://sz.vvv5g.com/assets/img/wxImg/store_top.png); background-size: 100% auto">
			<view class="" style="background: #fff">
				<view style="background: white">
					<view class="" :style="'height:' + navBarInfo.statusBarHeight + 'px;'"></view>
					<view class="flex align-center justify-between" :style="'height:' + navBarInfo.navBarHeight + 'px;width:' + navBarInfo.navBarWidth + 'px;'">
						<view @click="goBack" class="" style="font-size: 0; margin-left: 40rpx">
							<image style="width: 48rpx; height: 48rpx" src="../../static/left_jian_back.png" mode=""></image>
						</view>
						<view class="text-overflow1" style="font-size: 32rpx; color: #000; text-align: center; font-weight: 600" :style="'width:' + navBarInfo.navBarContentWidth + 'px;'">
							{{ title }}
						</view>
					</view>
				</view>
				<!-- 第二切换卡 -->
				<view>
					<view class="flex" style="margin: 32rpx 0 0rpx 32rpx">
						<scroll-view style="white-space: nowrap; font-size: 0" scroll-with-animation scroll-x="true" :scroll-into-view="'t' + tid">
							<view style="display: inline-block; margin-right: 52rpx" v-for="(item, index) in navsList" :key="index" @click="onActive(item.id)">
								<view :id="'t' + item.id" class="flex flex-column justify-center align-center">
									<view
										:class="navIndex == item.id ? 'flex align-center active_item' : 'flex align-center'"
										:style="navIndex == item.id ? 'font-weight:700;' : ''"
										style="font-size: 26rpx; color: #333"
									>
										{{ item.name }}
									</view>
									<view class="" v-if="navIndex == item.id" style="width: 36rpx; height: 6rpx; background: #fff; margin-top: 12rpx"></view>
								</view>
							</view>
						</scroll-view>
						<view class="fen" @click="onXianS" style="">
							<image class="image-fenlei" src="@/static/store/fenglei2.png" mode=""></image>
						</view>
					</view>
					<!-- 摄影师切换卡 -->

					<!-- 第四选项卡 -->
					<view class="flex align-center justify-around" style="padding-top: 32rpx; padding-bottom: 28rpx; background: #fff; border-radius: 20rpx 20rpx 0 0">
						<view
							class="flex align-center"
							:style="screenIndex == index ? 'color: #333;font-style: Heavy;' : 'color: #999'"
							style="font-size: 24rpx"
							@click="selectThree(index)"
							v-for="(item, index) in screenList"
							:key="index"
						>
							<view :class="flag_three == index ? 'active_three' : 'three_type'" style="margin-right: 10rpx">
								{{ item.name }}
							</view>
							<view style="width: 24rpx; height: 24rpx">
								<image style="width: 100%; height: 100%" :src="flag_three == index ? item.active_src : item.src" mode=""></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="fu_chuang" v-if="show" @click="close">
			<view class="c_fu_chuang mar-auto">
				<view class="c_fu_txt_box flex">
					<view class="list_txt" v-for="(item, index) in navsList" :key="index" @click.stop="fuActive(item.id)">
						<view class="fu_txt s28">
							{{ item.name }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="" :style="'height:' + topFixedHeight + 'px;'"></view>
		<!-- 列表 -->
		<!-- <zero-waterfall v-show="flag == 0" :list="goodsList" @clear="clearData" :status="status"></zero-waterfall> -->
		<zero-waterfall :list="goodsList" @clear="clearData" :status="status"></zero-waterfall>
		<!-- 店铺列表 -->
		<view v-show="flag == 1" class="list_max_box">
			<view
				class="bot_list_goods_box"
				style="position: relative"
				v-if="storeList.length > 0"
				v-for="(item, index) in storeList"
				@click="onGoods(item.is_photography, item.id, item.shopname)"
				:key="item.id"
			>
				<view class="flex">
					<view class="portrait">
						<image class="w100 h100" :src="item.avatar_url" mode=""></image>
					</view>
					<view class="right_txtbox">
						<view class="store_name f800 s28">
							{{ item.shopname }}
						</view>
						<view class="goods_num_fangke_num f500 s22 family">商品{{ item.goods }} &nbsp;| &nbsp;访客{{ item.views }}</view>
						<view class="bottom_dingwei flex" @click.stop="getOpenLoaction(item.latitude, item.longitude)">
							<view class="weizhi_img">
								<image class="w100 h100" src="../../static/store/dingwei.png" mode=""></image>
							</view>
							<view class="dingwei_txt f500 s22 family">
								<block v-if="item.latitude && item.longitude">距离{{ item.distance }}</block>
								&nbsp;&nbsp;{{ item.city }}
							</view>
							<view style="position: absolute; right: 32rpx; z-index: 999; background-color: #fff" class="operate">
								<div class="comment">
									<div style="width: 30rpx; height: 30rpx; background-color: #f2f3f7"></div>
									<div>评论</div>
								</div>
								<div class="line"></div>
								<div class="phone">
									<div style="width: 30rpx; height: 30rpx; background-color: #ccc"></div>
									<div>电话</div>
								</div>
							</view>
						</view>
					</view>
				</view>

				<view class="store_tips">
					<div class="tips_left">擅长：轻奢风格婚礼</div>
					<div class="tips_right">></div>
				</view>
			</view>

			<view class="no_list" v-if="storeList.length == 0">没有更多数据</view>
		</view>
		<!-- 老师列表 -->

		<!-- 样片列表 -->
	</view>
</template>

<script>
import { mapState } from 'vuex';
import app from '../../App.vue';
import screenList from '@/components/screen.vue';

export default {
	computed: {
		// ...mapState()
	},
	data() {
		return {
			// 吸顶
			barisTrue: null,
			// 第一个分类标识
			flag: 0,
			// 第三分类标识
			flag_three: 0,
			// 商品列表
			goodsList: [],
			// 摄影师切换卡标识
			flagOption: 1,
			// star标识
			flagStar: false,
			navIndex: null,
			screenIndex: 0,
			status: 0,
			tid: 1,
			keyWord: '',
			show: false,
			storeList: [],
			title: '',
			screenList: [
				{
					name: '价格排序',
					src: '../../static/Group 122.png',
					active_src: '../../static/Group 3814.png'
				},
				{
					name: '最新上架',
					src: '../../static/Group 121.png',
					active_src: '../../static/Group 3817.png'
				},
				{
					name: '人气爆款',
					src: '../../static/Group 942.png',
					active_src: '../../static/Group 3815.png'
				},
				{
					name: '评分最高',
					src: '../../static/Group 941.png',
					active_src: '../../static/Group 3816.png'
				}
			],
			navsList: [],
			longitude: '',
			latitude: '',
			statusbarHeight: 0,
			navBarInfo: {},
			topFixedHeight: 0,
			rangeIndex: 1, //0 同城 1 全国
			// 吸顶标识
			goodsParams: {
				brand_id: [],
				cat_id: null,
				keywords: '',
				shop_id: 0,
				sort: '',
				page: 1
			},
			brand_id: ''
		};
	},
	onLoad(query) {
		this.goodsParams.brand_id = [];
		this.goodsParams.brand_id.push(query.id);
		this.brand_id = query.id;
		this.title = query.name;
		this.getNavsList();
		this.goodsParams.page = 1;
		// this.getStoreData()
		this.getGoodsData();
		this.navBarInfo = this.$navBarInfo;
		let that = this;
		const sysres = uni.getSystemInfoSync();
		that.statusbarHeight = sysres.statusBarHeight;
		setTimeout(() => {
			const query = uni.createSelectorQuery().in(this);

			query
				.select('.topFixed')
				.boundingClientRect((data) => {
					this.topFixedHeight = data.height;
				})
				.exec();
		}, 300);
	},
	mounted() {},
	onPullDownRefresh() {
		this.getStoreData();
	},
	onPageScroll(e) {
		if (e.scrollTop > this.topFixedHeight) {
			this.barisTrue = true;
		} else {
			this.barisTrue = false;
		}
	},
	onReachBottom() {
		// if (this.flag == 0) {
		if (this.goodsParams.page >= this.totalNum) {
			this.$wanlshop.msg('我是有底线的!');
		} else {
			this.status = 0;
			this.goodsParams.page++;
			this.getGoodsData();
		}
		// }
	},
	methods: {
		goBack() {
			uni.navigateBack(1);
		},
		fuActive(id) {
			console.log('fuActive');
			this.tid = id;
			this.navIndex = id;
			this.goodsParams.cat_id = id;
			this.goodsParams.page = 1;
			this.getGoodsData();
			this.show = !this.show;
		},
		// 选中第一个分类
		selectBigtab: function (index) {
			this.flag = index;
		},
		// 选中第三个分类
		selectThree: function (index) {
			console.log('selectThree');
			this.flag_three = index;
			this.goodsParams.page = 1;
			this.goodsParams.sort = index;
			this.getGoodsData();
		},
		clearData(val) {
			this.goodsList = val;
		},
		changeRange(e) {
			this.rangeIndex = e;
		},
		// 调取导航
		getOpenLoaction(latitude, longitude) {
			if (!latitude && !longitude) {
				uni.showToast({
					title: '当前店铺未开启定位！',
					icon: 'none'
				});
				return false;
			}
			uni.openLocation({
				latitude: Number(latitude),
				longitude: Number(longitude),
				success: function () {},
				fail(error) {}
			});
		},
		// 获取类目列表
		getNavsList() {
			let that = this;
			that
				.$request({
					url: 'product/b_seaech',
					method: 'post',
					data: {
						keywords: '',
						brand_id: this.brand_id
					}
				})
				.then((res) => {
					if (res.statusCode == 200) {
						res.data.data.unshift({
							name: '全部商品',
							id: null
						});
						that.navsList = res.data.data;
					}
				});
		},
		getGoodsData() {
			let that = this;
			uni.showLoading({
				title: '加载中...'
			});
			that
				.$request({
					url: 'product/lists',
					method: 'POST',
					data: {
						brand_id: this.goodsParams.brand_id,
						cat_id: this.goodsParams.cat_id,
						category_attribute: this.goodsParams.category_attribute,
						keywords: this.goodsParams.keywords,
						order: 'asc',
						page: this.goodsParams.page,
						sort: this.goodsParams.sort == 0 ? 'price' : this.goodsParams.sort == 1 ? 'createtime' : this.goodsParams.sort == 2 ? 'views' : 'comment',
						index: 'index'
					}
				})
				.then((res) => {
					that.totalNum = res.data.data.last_page;
					console.log(that.goodsParams.page);
					if (that.goodsParams.page == 1) {
						that.status = 1;
						(that.goodsList = res.data.data.data ? res.data.data.data : []), console.log(that.status);
					} else {
						that.goodsList = that.goodsParams.page == 1 ? (res.data.data.data ? res.data.data.data : []) : that.goodsList.concat(res.data.data.data);
					}

					uni.hideLoading();
					// that.status = 0
				});
		},
		// 搜索门店
		onSearch() {
			this.getStoreData();
		},
		// 跳转店铺详情
		onGoods(flag, id, name) {
			let shopDetail = {
				shopname: name,
				id: id,
				flag: flag
			};

			let that = this;
			if (flag != 1) {
				uni.navigateTo({
					url: '../filePages/storePages/index'
				});
				that.$store.commit('getDataShop', shopDetail);
			} else {
				that.$store.commit('getDataShopname', shopDetail);
				uni.navigateTo({
					url: '/pages/store/goodsList'
				});
			}
		},

		// 二级分类切换
		screenActive(ind) {
			this.screenIndex = ind;
			this.getStoreData();
		},
		// 控制分类开关
		onXianS() {
			this.show = !this.show;
		},
		close() {
			this.show = false;
		},
		// navlist切换门店
		onActive(id) {
			this.goodsParams.cat_id = id;
			this.navIndex = id;
			this.tid = id;
			this.goodsParams.page = 1;
			console.log('onActive');
			this.getGoodsData();
		},
		// 店铺电话btn
		onPhone(data) {
			uni.makePhoneCall({
				phoneNumber: data
			});
		},
		// 去评论
		goPinglun(id) {
			uni.navigateTo({
				url: '/pages/filePages/evaluate/evaluate?shopid=' + id
			});
		}
	}
};
</script>
<style>
page {
	background: #f2f3f7;
}
</style>
<style scoped lang="scss">
// 筛选弹窗
.active_item {
	background: url('@/static/store/fenglei3.png') right bottom no-repeat;
	background-size: 70%;
}

.fu_chuang {
	width: 750upx;
	height: 1624upx;
	background: rgba(0, 0, 0, 0.5);
	position: fixed;
	top: 0;
	z-index: 99999;

	.c_fu_chuang {
		width: 686upx;
		background: #ffffff;
		border-radius: 24upx 24upx 24upx 24upx;
		margin-top: 382upx;

		.c_fu_txt_box {
			flex-wrap: wrap;
			padding-top: 34upx;
			padding-bottom: 8upx;

			.list_txt {
				margin-left: 46upx;
				margin-bottom: 30upx;

				.fu_txt {
					color: #333;
				}
			}
		}
	}
}

// 第一分类样式
.bigtab {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	width: 156rpx;
	height: 156rpx;
	background: #fff;

	margin-right: 6rpx;

	.type {
		font-family: 'PingFang SC';
		font-weight: 400;
		font-size: 26rpx;
		color: #6e6f71;
	}

	.active_font {
		font-family: 'PingFang SC';
		font-weight: 600;
		font-size: 28rpx;
		color: #333;
	}
}

// 第三分类样式
.three_type {
	color: #999;
	font-family: 'PingFang SC';
	font-style: normal;
	font-weight: 400;
	font-size: 24rpx;
}

.active_three {
	font-family: 'PingFang SC';
	font-style: normal;
	font-weight: 400;
	font-size: 12px;
	color: #333333;
}

.active {
	box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.16);
	border-radius: 10px;
}

// 摄影师切换卡样式
.option {
	width: 100rpx;
	height: 44rpx;
	text-align: center;
	line-height: 44rpx;
	font-family: 'PingFang SC';
	font-style: normal;
	font-weight: 400;
	font-size: 10px;
	color: #666;
	background: #f6f6f6;
	border-radius: 3px;
}

.active_option {
	background-color: #333;
	color: #fff;
}

.xiding {
	position: fixed;
	z-index: 9999;
	left: 0rpx;
	top: 240rpx;
	background-color: #ffffff;
}

.store {
	background-color: #f2f3f7;
	overflow: hidden;

	.store_tips {
		margin-top: 10rpx;
		background: linear-gradient(90deg, #f4f5f9 0%, rgba(244, 245, 249, 0) 100%);
		border-radius: 12rpx;
		width: 638rpx;
		height: 52rpx;
		justify-content: space-between;
		align-items: center;
		padding-left: 10rpx;
		display: flex;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 20rpx;
		color: #999;
	}

	.fen {
		width: 96rpx;
		height: 34rpx;
		background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 15.75%);
		display: flex;
		justify-content: center;
		position: fixed;
		right: 0px;

		.image-fenlei {
			width: 34rpx;
			height: 34rpx;
		}
	}

	.list_bottom_box {
		background: #ffffff;
		border-radius: 40upx 40upx 0upx 0upx;
		margin-top: 24upx;
		overflow: hidden;

		.bottom_seater {
			margin-top: 40upx;
			padding-left: 66upx;
			padding-right: 66upx;
			margin-bottom: 40upx;

			.bot_list_txt {
				font-family: PingFang SC-Heavy, PingFang SC;
				color: #999999;
				margin-left: 126upx;
			}

			.bot_list_txt:nth-child(1) {
				margin-left: 0;
			}

			.bot_list_txt_active {
				font-family: PingFang SC-Heavy, PingFang SC;
				color: #333333;
			}
		}
	}

	.list_max_box {
		background-color: #f2f3f7;
		padding: 30upx 0 30upx 0;
		padding: 0 0 30upx 0;
		padding-top: 20rpx;

		.bot_list_goods_box {
			width: 666upx;
			height: 238upx;
			background: #fff;
			border-radius: 16upx 16upx 16upx 16upx;
			margin: 20upx auto;
			padding: 20upx 0 0 20upx;

			.portrait {
				width: 160upx;
				height: 160upx;
				border-radius: 16upx 16upx 16upx 16upx;
				overflow: hidden;
			}

			.right_txtbox {
				margin-left: 28upx;

				.store_name {
					font-family: PingFang SC-Heavy, PingFang SC;
					color: #333333;
					margin-top: 8upx;
				}

				.goods_num_fangke_num {
					color: #666666;
					margin-top: 20upx;
				}

				.xinxi_phone_img {
					margin-top: 20upx;

					.xinxi_img {
						width: 54upx;
						height: 54upx;
					}

					.phone_img {
						width: 54upx;
						height: 54upx;
						margin-left: 56upx;
					}

					.guanzhu_btn {
						width: 116upx;
						height: 48upx;
						border-radius: 8upx 8upx 8upx 8upx;
						border: 2upx solid #eb8787;
						color: #eb8787;
						position: absolute;
						margin-top: -24rpx;
						right: 56rpx;
						line-height: 48upx;
					}

					.guanzhu_btn_active {
						width: 116upx;
						height: 48upx;
						border-radius: 8upx 8upx 8upx 8upx;
						background-color: #eb8787;
						color: #fff;
						position: absolute;
						margin-top: -24rpx;
						right: 56rpx;
						line-height: 48upx;
					}
				}
			}

			.bottom_dingwei {
				margin-top: 14upx;

				.operate {
					width: 152rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: -20rpx;

					.comment {
						height: 60rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: center;

						div {
							font-family: 'PingFang SC';
							font-style: normal;
							font-weight: 400;
							font-size: 18rpx;
							color: #333333;
						}
					}

					.line {
						width: 2rpx;
						height: 20rpx;
						background-color: #d8d8d8;
					}

					.phone {
						height: 60rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-evenly;
						align-items: center;

						div {
							font-family: 'PingFang SC';
							font-style: normal;
							font-weight: 400;
							font-size: 18rpx;
							color: #333333;
						}
					}
				}

				.weizhi_img {
					width: 26upx;
					height: 26upx;
				}

				.dingwei_txt {
					color: #e29d48;
					margin-top: 4upx;
					margin-left: 8upx;
				}
			}
		}

		.bot_list_goods_box:first-child {
			margin-top: 0upx;
		}

		.no_list {
			text-align: center;
			margin-top: 60%;
		}
	}

	.header_back {
		height: 296upx;
		position: absolute;
	}

	.title {
		font-size: 32upx;
		color: #ffffff;
		text-align: center;
	}

	.header_box {
		position: relative;
		z-index: 99;

		.uni-input {
			width: 608upx;
			height: 68upx;
			background: #ffffff;
			border-radius: 8upx 8upx 8upx 8upx;
			margin: 48upx auto;
			margin-bottom: 0;
			padding-left: 78upx;
			color: #cccccc;
		}

		.ipt_sousuo {
			width: 40upx;
			height: 40upx;
			position: relative;
			top: -52upx;
			left: 56upx;
		}

		.nav_list {
			margin-top: -16upx;
			padding-left: 36upx;

			.nav_list_box {
				width: 630upx;

				.scroll-view_H {
					white-space: nowrap;

					.scroll-view-item_H {
						display: inline-block;
						margin-left: 58upx;

						.nav_list_txt {
							width: 104upx;
							height: 36upx;
							font-size: 26upx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #ffffff;
						}

						.nav_txt_active {
							font-size: 26upx;
							font-family: PingFang SC-Heavy, PingFang SC;
							font-weight: 800;
							color: #ffffff;
						}

						.nav_list_botxian {
							width: 46upx;
							border-bottom: 6upx solid #ffffff;
							margin: 6upx auto;
						}
					}

					.scroll-view-item_H:nth-child(1) {
						margin-left: 0rpx;
					}
				}
			}

			.fenlei_box {
				width: 34upx;
				height: 34upx;
				margin-right: 30rpx;
				margin-top: 6rpx;
			}
		}
	}
}

.xiding {
	width: 100%;
	background-color: #fff;
	position: fixed;
	top: 0;
}

.teacher_box {
	width: 750rpx;
	display: flex;
	flex-wrap: wrap;
	padding: 0rpx 28rpx;
	padding-top: 20rpx;

	.t_item {
		width: 336rpx;
		background-color: #fff;
		border-radius: 8rpx;
		margin-right: 22rpx;
		overflow: hidden;
		margin-bottom: 20rpx;

		.item_top {
			width: 336rpx;
			height: 336rpx;
			background-color: #ccc;
		}

		.item_bottom {
			width: 312rpx;
			height: 94rpx;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			padding: 20rpx 12rpx;

			.title {
				display: flex;
				justify-content: space-between;

				.title_l {
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 600;
					font-size: 24rpx;
					color: #333333;
				}

				.star {
					display: flex;
					align-items: center;
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 400;
					font-size: 20rpx;
					color: #999999;

					.star_l {
						margin-right: 7rpx;
						width: 20rpx;
						height: 20rpx;
						background-color: #999;
					}
				}

				.star_active {
					display: flex;
					align-items: center;
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 400;
					font-size: 20rpx;
					color: #ebbe87;

					.star_l {
						margin-right: 7rpx;
						width: 20rpx;
						height: 20rpx;
						background-color: #ebbe87;
					}
				}
			}

			.tips {
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 10px;
				color: #666;
				margin-top: 12rpx;
			}
		}
	}
}
</style>
